<template>
  <div class="setting">
    <el-card>
      <el-tabs v-model="activeTab" @tab-click="handleClick(activeTab)">
      <el-tab-pane label="涂胶设置" name="first">
        <el-collapse v-model="activeBoard" @change="handleChange(activeBoard)">
          <el-collapse-item title="涂胶参数" name="1">
            <el-form ref="form" label-width="100px" class="painting-param-input">
              <el-form-item label="外圈取点数量">
                <el-input v-model="paintForm.outsideContourPointNum" placeholder="输入大于0的整数" size="mini" @blur="submitChange('paint')"/>
              </el-form-item>
              <el-form-item label="外圈涂胶距离">
                <el-input v-model="paintForm.outsideContourPaintDistance" placeholder="输入大于0的整数" size="mini" @blur="submitChange('paint')"/>
              </el-form-item>
              <el-form-item label="外圈涂胶起点">
                <el-input v-model="paintForm.outsideContourPaintStartPoint" placeholder="输入大于0的整数" size="mini" @blur="submitChange('paint')"/>
              </el-form-item>
              <el-form-item label="内圈取点数量">
                <el-input v-model="paintForm.insideContourPointNum" placeholder="输入大于0的整数" size="mini" @blur="submitChange('paint')"/>
              </el-form-item>
              <el-form-item label="内圈涂胶距离">
                <el-input v-model="paintForm.insideContourPaintDistance" placeholder="输入大于0的整数" size="mini" @blur="submitChange('paint')"/>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="限位参数" name="2">
            <el-form ref="form" :model="limitFrom" label-width="100px" class="limit-param-input">
              <el-form-item label="X 限位范围">
                <el-input v-model="limitFrom.x.max" placeholder="输入大于0的整数" size="mini" @blur="submitChange('limit')">
                  <template slot="prepend">Max</template>
                </el-input>
                <el-input v-model="limitFrom.x.min" placeholder="输入大于0的整数" size="mini" @blur="submitChange('limit')">
                  <template slot="prepend">Min</template>
                </el-input>
              </el-form-item>
              <el-form-item label="Y 限位范围">
                <el-input v-model="limitFrom.y.max" placeholder="输入大于0的整数" size="mini"  @blur="submitChange('limit')">
                  <template slot="prepend">Max</template>
                </el-input>
                <el-input v-model="limitFrom.y.min" placeholder="输入大于0的整数" size="mini"  @blur="submitChange('limit')">
                  <template slot="prepend">Min</template>
                </el-input>
              </el-form-item>
              <el-form-item label="Z 限位范围">
                <el-input v-model="limitFrom.z.max" placeholder="输入大于0的整数" size="mini"  @blur="submitChange('limit')">
                  <template slot="prepend">Max</template>
                </el-input>
                <el-input v-model="limitFrom.z.min" placeholder="输入大于0的整数" size="mini"  @blur="submitChange('limit')">
                  <template slot="prepend">Min</template>
                </el-input>
              </el-form-item>
              <el-form-item label="O 限位范围">
                <el-input v-model="limitFrom.o.max" placeholder="输入大于0的整数" size="mini"  @blur="submitChange('limit')">
                  <template slot="prepend">Max</template>
                </el-input>
                <el-input v-model="limitFrom.o.min" placeholder="输入大于0的整数" size="mini" @blur="submitChange('limit')">
                  <template slot="prepend">Min</template>
                </el-input>
              </el-form-item>
              <el-form-item label="A 限位范围">
                <el-input v-model="limitFrom.a.max" placeholder="输入大于0的整数" size="mini" @blur="submitChange('limit')">
                  <template slot="prepend">Max</template>
                </el-input>
                <el-input v-model="limitFrom.a.min" placeholder="输入大于0的整数" size="mini" @blur="submitChange('limit')">
                  <template slot="prepend">Min</template>
                </el-input>
              </el-form-item>
              <el-form-item label="T 限位范围">
                <el-input v-model="limitFrom.t.max" placeholder="输入大于0的整数" size="mini" @blur="submitChange('limit')">
                  <template slot="prepend">Max</template>
                </el-input>
                <el-input v-model="limitFrom.t.min" placeholder="输入大于0的整数" size="mini" @blur="submitChange('limit')">
                  <template slot="prepend">Min</template>
                </el-input>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="默认姿态" name="3">
            <el-form ref="form"  :model="defaultPostureForm" label-width="100px" class="default-posture-input">
              <el-form-item label="外圈">
                <el-input v-model="defaultPostureForm.outside.o" placeholder="O" size="mini" @blur="submitChange('posture')">
                  <template slot="prepend">O</template>
                </el-input>
                <el-input v-model="defaultPostureForm.outside.a" placeholder="A" size="mini" @blur="submitChange('posture')">
                  <template slot="prepend">A</template>
                </el-input>
                <el-input v-model="defaultPostureForm.outside.t" placeholder="T" size="mini" @blur="submitChange('posture')">
                  <template slot="prepend">T</template>
                </el-input>
              </el-form-item>
              <el-form-item label="内圈">
                <el-input v-model="defaultPostureForm.inside.o" placeholder="O" size="mini" @blur="submitChange('posture')">
                  <template slot="prepend">O</template>
                </el-input>
                <el-input v-model="defaultPostureForm.inside.a" placeholder="A" size="mini" @blur="submitChange('posture')">
                  <template slot="prepend">A</template>
                </el-input>
                <el-input v-model="defaultPostureForm.inside.t" placeholder="T" size="mini" @blur="submitChange('posture')">
                  <template slot="prepend">T</template>
                </el-input>
              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="标定设置" name="second">
        <el-image
          style="width: 40%; height: 100%;float: left"
          :src=imgUrl
          fit="fit"/>
        <div class="calibration-param">
          <el-button size="medium" @click="scan">扫描图像</el-button>
          <el-button size="medium" @click="compute_offset">确认标定</el-button>
          <el-collapse>
            <el-collapse-item title="图像坐标 Image position" name="1">
              <el-card>
                <el-button type="text" size="medium" @click="reload_img_calibration">重新载入</el-button>
                <el-form ref="form"  label-width="80px">
                  <el-form-item v-for="(item, i) in imgPosition" :label="'P'+ (i+1)" :key="i">
                <el-input v-model="item.x" placeholder="placeholder" size="mini" @blur="submitChange('img_p')">
                  <template slot="prepend">X</template>
                </el-input>
                <el-input v-model="item.y" placeholder="placeholder" size="mini" @blur="submitChange('img_p')">
                  <template slot="prepend">Y</template>
                </el-input>
                <el-input v-model="item.z" placeholder="placeholder" size="mini" @blur="submitChange('img_p')">
                  <template slot="prepend">Z</template>
                </el-input>
              </el-form-item>

                </el-form>
              </el-card>
            </el-collapse-item>
            <el-collapse-item title="机械手坐标 Axios position" name="2">
              <el-card>
                <el-button type="text" size="medium" @click="reload_axios_calibration">重新载入</el-button>
                <el-form ref="form" label-width="80px">
                  <el-form-item v-for="(item,i) in axiosPosition" :label="'P' + (i + 1)" :key="i">
                <el-input v-model="item.x" placeholder="placeholder" size="mini" @blur="submitChange('ax_p')">
                  <template slot="prepend">X</template>
                </el-input>
                <el-input v-model="item.y" placeholder="placeholder" size="mini"  @blur="submitChange('ax_p')">
                  <template slot="prepend">Y</template>
                </el-input>
                <el-input  v-model="item.z" placeholder="placeholder" size="mini"  @blur="submitChange('ax_p')">
                  <template slot="prepend">Z</template>
                </el-input>
              </el-form-item>

                </el-form>
              </el-card>
            </el-collapse-item>
            <el-collapse-item title="标定计算结果修改 Offset edit">
              <el-card>
                <el-button type="text" size="medium">重新载入</el-button>
                <el-input v-model="offset.offset_x" placeholder="placeholder" size="mini" @blur="submitChange('offset')">
                  <template slot="prepend">X</template>
                </el-input>
                <el-input v-model="offset.offset_y" placeholder="placeholder" size="mini" @blur="submitChange('offset')">
                  <template slot="prepend">Y</template>
                </el-input>
                <el-input v-model="offset.offset_z" placeholder="placeholder" size="mini" @blur="submitChange('offset')">
                  <template slot="prepend">Z</template>
                </el-input>
                <br>
              </el-card>
            </el-collapse-item>
          </el-collapse>

        </div>
      </el-tab-pane>
    </el-tabs>
    </el-card>
  </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "Setting",
        data(){
          return {
            activeTab: "first",
            activeBoard: "1",
            paintForm: {
              outsideContourPointNum: 0,
              outsideContourPaintDistance: 0,
              outsideContourPaintStartPoint: 0,
              insideContourPointNum: 0,
              insideContourPaintDistance: 0,
            },
            limitFrom: {
              x: {
                max: 0,
                min: 0,
              },
              y: {
                max: 0,
                min: 0,
              },
              z: {
                max: 0,
                min: 0,
              },
              o: {
                max: 0,
                min: 0,
              },
              a: {
                max: 0,
                min: 0,
              },
              t: {
                max: 0,
                min: 0,
              },
            },
            defaultPostureForm: {
              outside: {
                o: 0,
                a: 0,
                t: 0,
              },
              inside: {
                o: 0,
                a: 0,
                t: 0,
              },
            },
            imgPosition: [
              {
                x: 0,
                y: 0,
                z: 0,
              },
              {
                x: 0,
                y: 0,
                z: 0,
              },
              {
                x: 0,
                y: 0,
                z: 0,
              },
              {
                x: 0,
                y: 0,
                z: 0,
              },
              {
                x: 0,
                y: 0,
                z: 0,
              },
            ],
            axiosPosition: [
              {
                x: 0,
                y: 0,
                z: 0,
              },
              {
                x: 0,
                y: 0,
                z: 0,
              },
              {
                x: 0,
                y: 0,
                z: 0,
              },
              {
                x: 0,
                y: 0,
                z: 0,
              },
              {
                x: 0,
                y: 0,
                z: 0,
              },
            ],
            offset: {
              offset_x: "",
              offset_y: "",
              offset_z: "",
            },
            imgUrl : "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",

          }
        },
        methods: {
          handleClick(t){

          },
          handleChange(t){

          },
          submitChange(form){

            switch (form) {
              case "limit":
                axios
                  .post("http://127.0.0.1:8000/test/submit_param", {
                    form: form ,
                    submit_param: this.limitFrom,
                  });
                break;
              case "paint":
                axios
                  .post("http://127.0.0.1:8000/test/submit_param", {
                    form: form ,
                    submit_param: this.paintForm,
                  });
                break;
              case "posture":
                axios
                  .post("http://127.0.0.1:8000/test/submit_param", {
                    form: form ,
                    submit_param: this.defaultPostureForm,
                  });
                break;
              case "img_p":
                axios
                  .post("http://127.0.0.1:8000/test/submit_param", {
                    form: form ,
                    submit_param: this.imgPosition,
                  });
                break;
              case "ax_p":
                axios
                  .post("http://127.0.0.1:8000/test/submit_param", {
                    form: form ,
                    submit_param: this.axiosPosition,
                  });
                break;
              case "offset":
                axios
                  .post("http://127.0.0.1:8000/test/submit_param", {
                    form: form ,
                    submit_param: this.offset,
                  });
                break;
            }
          },
          scan(){
            axios
              .get("http://127.0.0.1:8000/test/unit_calibrate")
              .then((res)=>{
                this.imgUrl = res.data.img_name;
                this.imgPosition = res.data.points;
              })

          },
          compute_offset(){
            axios
              .post("http://127.0.0.1:8000/test/compute_img_axios_offset", {
                "axios_points": this.axiosPosition
              })
              .then((res)=>{
                console.log(res)
              })
          },
          reload_img_calibration(){
            axios
              .get("http://127.0.0.1:8000/test/reload_img_calibration")
              .then((res)=>{
                this.imgPosition = res.data.img_p
              })
          },
          reload_axios_calibration(){
            axios
              .get("http://127.0.0.1:8000/test/reload_axios_calibration")
              .then((res)=>{
                this.axiosPosition = res.data.ax_p
              })
          },
        },
        mounted() {
          axios
            .get("http://127.0.0.1:8000/test/get_setting_param")
            .then((res)=>{
              this.offset = res.data.offset
              this.paintForm = res.data.paint
              this.limitFrom = res.data.limit
              this.defaultPostureForm = res.data.posture
              this.imgPosition = res.data.img_p
              this.axiosPosition = res.data.ax_p
            })
        }
    }
</script>

<style scoped>
  /deep/.setting {
    padding: 10px;
  }
  /deep/.setting .el-card {
    background-color: #3C3F41;
    border-color: #3C3F41;
    color: #9E9F9F;
  }
  /deep/.setting .el-tabs__item {
    color: #9E9F9F;
  }
  /deep/.setting .el-tabs__item:hover {
    color: #B15B2E;
  }
  /deep/.setting .is-active {
    color: #B15B2E;
  }
  /deep/.setting .el-tabs__active-bar {
    background-color: #B15B2E;
  }
  /deep/.setting .el-tabs__nav-wrap::after {
    background-color: #2b2b2b;
  }

  /deep/.setting .el-collapse {
    border: none;
  }
  /deep/.setting .el-collapse-item__wrap {
    border: none;
  }
  /deep/.setting .el-collapse-item__header {
    background-color: #3C3F41;
    color: #9e9f9f;
    border: none;
  }
  /deep/.setting .el-collapse-item__content {
    background-color: #3C3F41;
    color: #9e9f9f;
    border: none;
  }

  /deep/.setting .el-form-item {
    margin-bottom: 10px;
    transition: width 3s;
    border-bottom: #9e9f9f solid 0px;
  }
  /deep/.setting .el-form-item__label {
    color: #9e9f9f;
  }
  /deep/.setting .painting-param-input .el-input {
    width: 100px;
    float: left;
    margin-left: 30px;
  }
  /deep/.setting .painting-param-input .el-input__inner {
    font-size: 10px;
    width: 100px;
    transition: width 500ms;
  }
  /deep/.setting .painting-param-input .el-input__inner:hover {
    width: 200px;
  }
  /deep/.setting .painting-param-input .el-input__inner:focus {
    width: 200px;
    border-color: #B15B2E;
  }
  /deep/.setting .limit-param-input .el-input {
    width: 125px;
    margin-left: 10px;
    float: left;
  }
  /deep/.setting .limit-param-input .el-input__inner:focus {
    border-color: #B15B2E;
  }


  /deep/.setting .default-posture-input .el-input {
    width: 100px;
    margin-left: 10px;
    float: left;
  }
  .calibration-param {
    float: left;
    width: 55%;
    margin-left: 20px;
  }
  /deep/.calibration-param .el-card {
    background-color: #2b2b2b;
    margin-bottom: 10px;
    margin-left: 10px;
    border-radius: 10px;
  }
  /deep/.calibration-param .el-card__header {
    border: #3C3F41 solid 1px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /deep/.calibration-param .el-button--text {
    color: #9e9f9f;
  }
  /deep/.calibration-param .el-button--text:hover {
    color: #B15B2E;
  }
  /deep/.calibration-param .el-button--text:active {
    color: #fff;
  }
  /deep/.calibration-param .el-input {
    float: left;
    margin-left: 10px;
    width: 50px;
  }
  /deep/.calibration-param .el-input__inner {
    width: 50px;
    transition: width 300ms;
    text-align: left;
    padding: 5px;
  }
  /deep/.calibration-param .el-input__inner:focus {
    width: 100px;
  }
  /deep/.calibration-param .el-input-group__prepend {
    padding: 2px;
    width: 10px;
  }

</style>
